import React, {useState, useEffect, useRef} from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faSearch, faTimes} from '@fortawesome/free-solid-svg-icons'
import './FileSearch.css';
import PropTypes from 'prop-types';
import useKeyPress from "../hooks/useKeyPress";


const FileSearch = ({title, onFileSearch}) => {
    const [inputActive, setInputActive] = useState(false)
    const [value, setValue] = useState('')
    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)


    let node = useRef(null)
    const closeSearch = () => {
        setInputActive(false)
        setValue('')
    }


    useEffect(() => {
        if (enterPressed && inputActive) {
            onFileSearch(value)
        }

        if (escPressed && inputActive) {
            closeSearch()
        }

    })

    useEffect(() => {
        if (inputActive) {
            node.current.focus()
        }
    }, [inputActive])


    return (
        <div className="alert
                        alert-primary
                        d-flex
                        justify-content-between
                        align-items-center
                        mb-0
                        ">
            {!inputActive &&
            <>
                            <span>
                                {title}
                            </span>
                <button
                    type="button"
                    className="icon-button"
                    onClick={() => {
                        setInputActive(true)
                    }}
                >
                    <FontAwesomeIcon
                        icon={faSearch}
                        size='lg'
                        title="搜索"
                    />
                </button>
            </>
            }
            {inputActive &&
            <>
                <input
                    className="form-control"
                    ref={node}
                    value={value}
                    onChange={(e) => {
                        setValue(e.target.value)
                    }
                    }
                />
                <button
                    type="button"
                    size='lg'
                    className="icon-button"
                    onClick={() => {
                        setInputActive(false)
                    }}
                >
                    <FontAwesomeIcon
                        icon={faTimes}
                        size='lg'
                        title="关闭"
                    />
                </button>
            </>
            }
        </div>
    )


}
FileSearch.propTypes = {
    title: PropTypes.string,
    onFileSearch: PropTypes.func.isRequired
}

export default FileSearch
